<div v-bind:class="[componentId]" class="logger-home cly-vue-logger">
    <cly-header style="margin-bottom: 24px;">
        <template v-slot:header-left>
            <h2 class="cly-vue-logger__title"> {{i18n('logger.title')}}
            </h2>
            <span v-tooltip="getTitleTooltip()"><i class="cly-vue-logger__tooltip ion-help-circled"></i></span>
        </template>
        </span>
        <template v-slot:header-bottom>
            <span class='cly-vue-logger__subtitle text-small'>
                {{collectionInfo}}
            </span>
        </template>
        <template v-slot:header-right>
            <cly-auto-refresh-toggle ref="loggerAutoRefreshToggle" feature="logger"></cly-auto-refresh-toggle>
        </template>
    </cly-header>
    <cly-main>
        <div style="margin-bottom: 24px;">
            <cly-notification v-if="showTurnedOff" :text="i18n('logger.state-off-warning', appId)"></cly-notification>
        </div>
        <cly-section>
            <cly-datatable-n
                ref="requestLogTable"
                :rows="logsData"
                :resizable="false"
                :force-loading="isLoading"
                :exportFormat="formatExportFunction"
                class="is-clickable"
                @row-click="handleTableRowClick"
                :row-class-name="tableRowClassName"
                :default-sort="{prop: 'reqts', order: 'descending'}">
                <template v-slot:header-left="filterScope">
                    <el-select v-model="loggerFilter" placeholder="Select" @change="filterChange()">
                        <el-option v-for="filter in filterOptions" :key="filter.value" :label="filter.label"
                            :value="filter.value">
                        </el-option>
                    </el-select>
                </template>
                <template v-slot="scope">
                    <el-table-column type="expand" class="shadow">
                        <template v-slot="props">
                            <cly-section>
                                <el-tabs type="card" value="data">
                                    <el-tab-pane name="data" label="Data">
                                        <vue-json-pretty :data="jsonParser(props.row.q)"/>
                                    </el-tab-pane>  
                                    <el-tab-pane name="header" label="Header">
                                        <vue-json-pretty :data="props.row.h"/>
                                    </el-tab-pane>
                                </el-tabs>
                            </cly-section>
                        </template>
                    </el-table-column>
                    <el-table-column class="request-date" sortable="custom"
                        :label="i18n('logger.requests')" vertical-align="middle" prop="reqts" min-width="283">
                        <template slot-scope="rowScope">
                            <logger-readable-date :timestamp="rowScope.row.reqts"></logger-readable-date>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="details" :label="i18n('logger.details')" min-width="413">
                        <template slot-scope="rowScope">
                            <logger-details :device="rowScope.row.d" :version="rowScope.row.v" :sdk="rowScope.row.s"
                                :location="rowScope.row.l"></logger-details>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="info" :label="i18n('logger.info')" min-width="283">
                        <template slot-scope="rowScope">
							<strong v-if="rowScope.row.c" class='red-text'>{{i18n('logger.request-canceled')}}</strong>
							<div v-if="rowScope.row.c" class="bu-pt-2" >{{rowScope.row.c}}</div>
                            <logger-info :info="rowScope.row.t" :filter="loggerFilter"></logger-info>
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>
    </cly-main>
</div>
